<template>
    <div class="xpage-detail">
        <canopy-check @caonpyChange="change" :value="state.canopyCode"></canopy-check>
        <div class="list-set">
            <div class="xblock-list xblock-list-set">
                <nut-cell-group>
                    <nut-cell title="目标种类预警">
                        <template v-slot:icon>
                            <img class="nut-icon" :src="iconType" />
                        </template>
                        <template v-slot:link>
                            <nut-switch v-model="state.switchChecked1" />
                        </template>
                    </nut-cell>
                    <nut-cell>
                        <template v-slot:title>
                            <div class="set-input">
                                <div>每天害虫种类数达</div>
                                <nut-input
                                    v-model="state.data.maxValue1"
                                    label=""
                                    input-align="center"
                                    placeholder="请输入"
                                />
                                <div>种，发出预警消息</div>
                            </div>
                        </template>
                    </nut-cell>
                </nut-cell-group>
                <nut-cell-group>
                    <nut-cell title="数量总和预警">
                        <template v-slot:icon>
                            <img class="nut-icon" :src="iconQuantity" />
                        </template>
                        <template v-slot:link>
                            <nut-switch v-model="state.switchChecked2" />
                        </template>
                    </nut-cell>
                    <nut-cell>
                        <template v-slot:title>
                            <div class="set-input">
                                <div>每天害虫种类数达</div>
                                <nut-input
                                    v-model="state.data.maxValue2"
                                    label=""
                                    input-align="center"
                                    placeholder="请输入"
                                />
                                <div>种，发出预警消息</div>
                            </div>
                        </template>
                    </nut-cell>
                    <nut-cell title="短信消息">
                        <template v-slot:icon>
                            <img class="nut-icon" :src="iconMsg" />
                        </template>
                        <template v-slot:link>
                            <nut-switch v-model="state.switchChecked3" />
                        </template>
                    </nut-cell>
                </nut-cell-group>
            </div>

            <div class="set-box">
                <div class="set-box-save">
                    <nut-button block plain type="info" @click="save">保存</nut-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro';
import canopyCheck from '@/components/canopyCheck';
import { usePullDownRefresh } from '@/hooks/life';
import { ref, onMounted, reactive } from 'vue';
import { useDidShow, useTabItemTap, useLoad } from '@tarojs/taro';
import { cqInfo, cqSave } from '@/services/apis/set';
const iconType = require('@/assets/icons/set-4.png');
const iconQuantity = require('@/assets/icons/set-5.png');
const iconMsg = require('@/assets/icons/set-3.png');
const state = reactive({
    canopyCode: '',
    sqcbHistoryList: [],
    pageNo: 1,
    pageSize: 10,
    alertType: '',
    count: 0,
    switchChecked1: false,
    switchChecked2: false,
    switchChecked3: false,
    data: {
        id: '',
        canopyId: '',
        keysType1: 'soil_temperature',
        maxValue1: '',
        isEnable1: '',
        keysType2: 'soil_humidity',
        maxValue2: '',
        isEnable2: '',
        isSms: '',
    },
    iconType,
    iconQuantity,
    iconMsg,
});
useLoad(() => {});
const activeName = ref('1');
const tabSwitch = (item, index) => {
    console.log(item, index);
};

const change = val => {
    console.log('val', val);
    cqInfo(val).then(data => {
        state.data.id = data.data?.id || '';
        state.data.canopyId = val;
        state.data.keysType1 = data.data?.keysType1 || '';
        state.data.maxValue1 = data.data?.maxValue1 || '';
        state.data.isEnable1 = data.data?.isEnable1 || '';
        state.data.keysType2 = data.data?.keysType2 || '';
        state.data.maxValue2 = data.data?.maxValue2 || '';
        state.data.isEnable2 = data.data?.isEnable2 || '';
        state.data.isSms = data.data?.isSms || '';
        state.data.isEnable1 == '1'
            ? (state.switchChecked1 = true)
            : (state.switchChecked1 = false);
        state.data.isEnable2 == '1'
            ? (state.switchChecked2 = true)
            : (state.switchChecked2 = false);
        state.data.isSms == '1' ? (state.switchChecked3 = true) : (state.switchChecked3 = false);

        //  state.data = {...data.data}
        console.log(JSON.stringify(state.data));
    });
};
const switchChecked = ref(false);
const text = ref('');

const checkboxgroup = ref(['2']);

const save = () => {
    state.switchChecked1 ? (state.data.isEnable1 = '1') : (state.data.isEnable1 = '0');
    state.switchChecked2 ? (state.data.isEnable2 = '1') : (state.data.isEnable2 = '0');
    state.switchChecked3 ? (state.data.isSms = '1') : (state.data.isSms = '0');
    console.log(JSON.stringify(state.data));
    cqSave(state.data).then(data => {
        if (data.result == 'true') {
            wx.showToast({
                title: data.message,
                icon: 'none',
                duration: 2000,
            });
        }
    });
};
</script>
<style lang="scss">
@import '@/assets/styles/index.scss';
$border-color: #eaeaea;
$border-radius: 6px;
.list-set {
    padding-top: 50px;
    overflow: hidden;
    .nut-cell-group {
        margin-top: 10px;
    }
    .xblock-list {
        .nut-cell {
            padding-left: 0;
            padding-right: 0;
            &::after {
                left: 0;
                right: 0;
            }
            .nut-input {
                margin: 0 10px;
                padding: 2px 5px;
                max-width: 60px;
                border: 1px solid $border-color;
                border-radius: $border-radius;
                min-width: 50px;
            }
            .set-input {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                div {
                    min-width: 50px;
                    color: #999;
                }
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
    .nut-switch {
        &.nut-switch-base {
            min-width: 42px;
            height: 24px;
            line-height: 24px;
            .switch-button {
                width: 18px;
                height: 18px;
                line-height: 18px;
                &::before {
                    content: '';
                    width: 6px;
                    height: 6px;
                    border: 2px solid #499d2f;
                    border-radius: 8px;
                }
            }
            &.switch-open {
                .switch-button {
                    transform: translateX(120%);
                    &::before {
                        content: '';
                        width: 2px;
                        height: 8px;
                        background: #499d2f;
                        border-radius: 2px;
                        border: 0;
                    }
                }
            }
            &.switch-close {
                background: #f1f2f9;
            }
        }
    }
    .nut-cell__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background: rgba(73, 157, 47, 0.16);
        border-radius: 50%;
    }
    .nut-icon {
        width: 12px;
        height: 12px;
        display: block;
    }
  .set-box {
      padding: 0 10px;
      .nut-checkbox__label {
          margin-left: 5px;
      }
      .nut-checkbox {
          margin-right: 10px;
      }
  }
  .no-box-shadow {
      box-shadow: none;
  }
  .set-box-save {
      padding: 20px 80px 20px 80px;
  }
}
</style>